Transparencias...

Desde que descubrí las plantillas Pyzam me atrajo el efecto de la transparencia, no tardé en probar y aunque no estaba mal del todo comprobé con desilusión que el efecto no era tan perfecto como yo esperaba.

Demasiado bonito y demasiado sencillo, pero en la práctica nos encontrábamos con el problema que al añadir opacidad o transparencia se anteponía de forma que los textos y las imágenes también mostraban la capa de transparencia.

Era necesario añadir una capa de transparencia sobre el background de la página pero que respetase el contenido ¿Cómo hacerlo? ni la más mínima idea, pregunté, busqué información y a mi pesar tuve que dejarlo de lado por no obtener los resultados esperados.

Después de un tiempo descubrí que alguien aportaba un sabroso dato sobre transparencias, se trata de Jorge R. Aldana CSS: Columnas Transparentes tiene la maravillosa idea de traducir a español la entrada original de Bits & Pixels que es en realidad el autor de esta maravillosa solución.

Hice algunas pruebas para añadir un ejemplo, la primera vez algo hacía mal, luego caí en la cuenta que las explicaciones eran para una columna, había que añadir estilos a una segunda columna y algo más tarde daba saltos de contenta.

Click en la imagen

Si quieres añadir este efecto a tu plantilla no olvides hacer antes una copia de respaldo, yo recomiendo también probar antes en otro blog con la misma plantilla que deseáis hacer los cambios.

Lo primero de todo fue añadir una imagen de fondo a la plantilla, utilicé la misma imagen que el autor utiliza para su ejemplo y proporciona en un zip. si queréis probar esta es la imagen:

En plantilla Edición de HTML localizamos body { y añadimos la imagen de esta forma:

body {
background:url('url-imgen');

Una vez tenemos la imagen nos situamos justo antes de ]]></b:skin> y añadimos lo siguiente:

.overlay {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 width: 100%;
 background: #000;
 opacity: 0.65;
 -moz-opacity: 0.65;
 filter:alpha(opacity=65);/* For IE6&7 */
 }
.container {
 position: relative;
 float: left;
 }
.content {
 position: relative; /* Fixes the z-index */
 float: left;
 }
#column-1 {
 width: 550px;
 }
#column-1 .content {
 padding: 20px;
 width: 510px;
 }
#column-2 {
 width: 220px;
 margin-left: 20px;
 float: left;
 display: inline;
 }
#column-2 .content {
 padding: 20px;
 width: 220px;
}
 
/* Let's compensate for IE6's inability to interpret top: 0; and bottom: 0; */ * html #column-1 .overlay { height: expression(document.getElementById("column-1").offsetHeight); } 
* html #column-2 .overlay { height: expression(document.getElementById("column-2").offsetHeight); }

Ahora lo que haremos será aplicar una capa de transparencia sobre el fondo (overlay) y una segunda capa (content) para el contenido, de esta forma el contenido se muestra sobre una transparencia.

Para añadir las capas necesitamos dos divs es decir dos bloques que se incluirán dentro de otro div con posición relativa.

<div class='container' id='column-1'>

<div class='overlay'/>

<div class='content'>

</div>

</div>

Este bloque lo añadiremos envolviendo el espacio de las entradas, buscaremos:
<div id='main-wrapper'> y justo antes añadimos lo que está en color rojo.

<div class='container' id='column-1'>
<div class='overlay'/>
<div class='content'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget ....(widgets añadidos)
..........
..........
..........
</b:section>
</div>
</div>
</div>

Donde los puntos suspensivos es el código que cada uno podemos tener, debemos prestar atención y comprobar que añadimos:

</div>
</div>
justo donde termina:
</b:section>
</div>

Ahora nos queda la sidebar, buscamos <div id='sidebar-wrapper'> y añadimos lo que está en rojo:
<div class='container' id='column-2'>
<div class='overlay'/>
<div class='content'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget... (widgets añadidos)
..........
..........
..........
</b:section>
</div>
</div>
</div>

Si miramos en vista previa veremos la transparencia, pero quizás se desplace la columna o no quede todo lo centrado que nos gustaría, eso tiene su explicación ya que las medidas establecidas no son las mismas en todas las plantillas. Lo que haremos será ayudarnos del primer código que añadimos en la CSS para conseguir sea de nuestro agrado.

¿Lo solucionamos?

"El color de la transparencia" lo podemos modificar en .overlay sustituyendo background: #000; por otro color.

Miramos en #main-wrapper la medida, si por ejemplo es width: 464px; en #column-1 .content añadimos el mismo valor y comprobamos en vista previa el resultado.

Lo mismo ocurría con #column-2 .content, con la diferencia que miraríamos la medida en #sidebar-wrapper.

Si observamos que la transparencia no ocupa todo el contendido aumentaremos el valor en #column-1 y #column-2.

La intensidad de la transparencia puede ser más o menos intensa aumentando o disminuyendo el valor en:

opacity: 0.65;

-moz-opacity: 0.65;

filter:alpha(opacity=65);

Con "padding" en #column-1 .content bajamos o subimos el contenido.

Para separar la sidebar de las entradas lo hacemos en #column-2 (margin-left)

Y eso es todo, paciencia y suerte el resultado vale la pena.

Transparencia que ocupa todo el ancho.
Ver ejemplo.